<template>
    <vxe-table
            border
            ref="treeTable"
            resizable
            :height="tableHeight"
            show-overflow
            :tooltip-config="{enterable: true,theme:effect}"
            highlight-hover-row
            :highlight-current-row="highlightCurrentRow"
            :row-class-name="rowClassName"
            align="center"
            :stripe="stripe"
            :auto-resize="autoResize"
            :loading="listLoading"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
            @cell-click="cellClick"
            @cell-dblclick="cellDblclick"
            header-row-class-name="tableHeader"
            :expand-config="{expandAll: expandAll}"
            :tree-config="{lazy: lazy, children: childrenName, hasChild: 'hasChild', expandRowKeys: defaultExpandRowKeys, loadMethod: loadChildrenMethod , iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}"
            :data="tableData" class="defaultTable">
        <vxe-table-column type="checkbox" width="60" v-if="mutiSelect"></vxe-table-column>
        <template v-for="(column, index) in fixedColumns">
            <!--<vxe-table-column
                    :field="column.prop"
                    :title="column.label"
                    :key='index'
                    :align="column.align"
                    v-if="!column.render"
                    :tree-node="column.treeNode"
                    :width="column.width"
            >
            </vxe-table-column>-->
            <vxe-table-column
                    :field="column.prop"
                    :title="column.label"
                    :key='index'
                    :align="column.align"
                    class="row--stripe"
                    :tree-node="column.treeNode"
                    :width="column.width"
            >
                <template slot-scope="scope">
                    <!--<i class="el-icon-menu rowStripeW" v-if="column.render(scope.row)" ref="rowStripeW"></i>
                    <span>{{scope.row[column.prop]}}</span>-->
                    <template v-if="column.render">
                        <common-tooltip :tip="column.render(scope.row, column)">
                            <span v-html="column.render(scope.row, column)"></span>
                        </common-tooltip>
                    </template>
                    <template v-else-if="column.dictData">
                        <common-tooltip :tip="scope.row[column.prop + '_Text']">
                            <span v-html="scope.row[column.prop + '_Text']"></span>
                        </common-tooltip>
                    </template>
                    <template v-else>
                        <common-tooltip :tip="scope.row[column.prop]">
                            <span v-html="scope.row[column.prop]"></span>
                        </common-tooltip>
                    </template>
                </template>
            </vxe-table-column>
        </template>
        <!-- <template v-for="(column, index) in activityColumns">
            <vxe-table-column
                :field="column.prop"
                :title="column.label"
                :key='column.id + ""'
                :align="column.align">
                <template slot-scope="scope">
                    <span v-if="scope.row.fondRoleUserInfoList.length>0 && scope.row.fondRoleUserInfoList[index] && scope.row.fondRoleUserInfoList[index].fName">{{scope.row.fondRoleUserInfoList[index].fName}}</span>
                </template>
            </vxe-table-column>
        </template> -->
        <!--region 按钮操作组-->
        <vxe-table-column field="" :title="operates.label?operates.label:'操作'" align="center" :width="operates.width"
                          :fixed="operates.fixed" v-if="operatesShow">
            <template slot-scope="scope">
                <div class="operate-group">
                    <template v-for="(btn, key) in operates.list">
                        <el-tooltip class="item" :effect="effect" :content="btn.label" placement="top" :openDelay="1000">
                            <image-button  :cls="btn.operatesIcon" @click="btn.method(scope.row, scope.seq)"  v-if="!btn.type&&btn.showRender(scope.row)" :key='btn.id'
                                           :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></image-button>
                        </el-tooltip>
                        <span v-if="btn.type=='link'&&btn.showRender(scope.row)" :style="btn.style"
                              @click="btn.method(scope.row)">{{btn.label}}</span>
                        <span v-if="btn.type == 'label'&&btn.showRender(scope.row)"
                              @click="btn.method(scope.row)">{{btn.label||scope.row[btn.field]}}</span>
                        <inner-button :text="btn.label" @click="btn.method(scope.row, scope.seq)"
                                      :key='btn.id' v-if="btn.type == 'button'&&btn.showRender(scope.row)"></inner-button>

                    </template>
                </div>
            </template>
        </vxe-table-column>
    </vxe-table>
</template>
<script>
    export default {
        data() {
            return {
                commonIconStyle: 'commonIconStyle',
                malr5: 'malr5',
                isAllSelect: false,
                isRowClick: false,
                isAllSelectClick: false,
            }
        },
        props: {
            tableData: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            // loadChildrenMethod :{
            //     type: Function,
            //     default: function () {
            //         return '';
            //     }
            // },
            stripe: {
                type: Boolean,
                default: true
            },
            fixedColumns: {
                type: Array,
                default: () => []
            },
            defaultExpandRowKeys: {
                type: Array,
                default: () => []
            },
            activityColumns: {
                type: Array,
                default: () => []
            },
            operates: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            getRowKeys: {
                type: Function,
                // default: function () {
                //     return '';
                // }
            },
            tableHeight: Number,
            mutiSelect: false, // 是否显示复选框
            listLoading: false,
            operatesShow: false,// 是否显示操作列
            highlightCurrentRow: {
                type: Boolean,
                default: true
            },// 是否高亮选择行
            lazy: false,// 是否开启懒加载
            autoResize: {
                type: Boolean,
                default: true
            },
            expandAll: true,
            rowClassName: {
                type: Function,
                default: (row) => {
                    if(row.kindName === null && row.nodeType === 1){
                        return 'row--stripe';
                    }
                }
            },
            childrenName:{
                type:String,
                default:'children'
            },
            effect:{
                type: String,
                default: 'dark'//light
            }
        },
        methods: {
            loadChildrenMethod({row}) {
                let promise = new Promise((resolve, reject) => {
                    this.$emit('loadChildrenMethod', resolve, row);
                })
                return promise
            },
            //全选事件
            selectAllEvent({checked, records}) {
                this.$emit('selectAllEvent', checked, records);
            },
            // 单选事件
            selectChangeEvent({checked, records}) {
                this.$emit('selectChangeEvent', checked, records);
            },
            // 列表单击事件
            cellClick({row, rowIndex, $rowIndex}) {
                this.$emit('cellClick', row, rowIndex, $rowIndex);
            },
            // 列表双击事件
            cellDblclick({row, rowIndex, $rowIndex}) {
                this.$emit('cellDblclick', row, rowIndex, $rowIndex);
            },
            // 为特殊行设置样式
            /* rowClassName ({ row, rowIndex }) {
               return row.kindName === null && row.nodeType === 1 ? 'row--stripe' : ''
            },*/
            setAllRowExpand(flag) {
                this.$refs.treeTable.setAllTreeExpansion(flag)
            },
            setCurrentRow(row){
                this.$refs.treeTable.setCurrentRow(row)
            }
        },
        created() {

        },
        mounted() {

        }
    }
</script>
<style lang="scss" scoped>

</style>